<!DOCTYPE html>
<html>



<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>矩阵互动</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if (window.top !== window.self) { window.top.location = window.location; }
    </script>
</head>

<body class="gray-bg">

    <div id="login" class="middle-box text-center loginscreen  animated fadeInDown" style="margin-top:200px;">
        <div>

            <h3>欢迎使用</h3>

            <form class="m-t" role="form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名" required="" id="loginUser">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="密码" required="" id="loginPasswd">
                </div>
                <button type="button" class="btn btn-primary block full-width m-b" id="loginBtn">登 录</button>

            </form>
        </div>
    </div>

    <div id="table" class="row" style="display:none;">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h2>首创奥特莱斯转盘抽奖后台管理</h2>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>

                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 10 项，共 57 项</div>
                        </div>
                        <div class="col-sm-6">
                            <ul class="pagination" style="margin: 0;padding: 0;    float: right;">
                                <li class="paginate_button previous" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_previous">
                                    <a href="#">上一页</a>
                                </li>
                                <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_next">
                                    <a href="#">下一页</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <button class="btn btn-default" type="button" class="btn" id="downTable">
                            下载表格
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script>

        function fecthLogin(account, password, cb) {
            $.post('http://api.juzhen05.com/api/scatls_zpgame_180121', { cmd: "login", account: account, password: password }, function (data) {
                if (cb) cb(data);
            })
        }

        function fecthTable(cb, offset, limit) {
            $.post('http://api.juzhen05.com/api/scatls_zpgame_180121', { cmd: "getTableData", offset: offset, limit: limit, token: localStorage.getItem('local_token') }, function (data) {
                if (cb) cb(data);
            })
        }

        function changeState(cb, openid) {
            $.post('http://api.juzhen05.com/api/scatls_zpgame_180121', { cmd: "changeState", openid: openid, token: localStorage.getItem('local_token') }, function (data) {
                if (cb) cb(data);
            })
        }


        function downTable(name) {
            var url = 'http://api.juzhen05.com/admin/downtable?tableName=' + name + '&token=' + localStorage.getItem('local_token');

            location.href = url
        }


        var curPage = 0;
        var dataCount = 0;
        var pageCount = 0;
        initTable = function (dataList, comments) {
            var titleDom = document.createElement('tr');
            var str = "";
            for (var i = 0; i < comments.length; i++) {
                str += '<th>' + comments[i].Comment + '</th>';
            }
            titleDom.innerHTML = str;
            $('.ibox-content thead').append(titleDom);


            for (var j = 0; j < dataList.length; j++) {
                var tr = document.createElement('tr');
                str = "";
                for (var k in dataList[j]) {
                    str += '<td>' + dataList[j][k] + '</td>';
                }
                tr.innerHTML = str + '<button class="btn btn-default getReward" type="button" >领取</button>';
                $('.ibox-content tbody').append(tr);
            }

            $('#DataTables_Table_0_info').text('显示 ' + (curPage * 10 + 1) + ' 到 ' + (curPage * 10 + dataList.length) + ' 项，共 ' + dataCount + ' 项')
        }

        // 登陆
        $('#loginBtn').click(function () {
            fecthLogin($('#loginUser').val(), $('#loginPasswd').val(), function (data) {
                if (data.code) {
                    localStorage.setItem('local_token', data.token)
                    $('#login').hide();
                    $('#table').show();
                    // 获取表格数据
                    fecthTable(function (data) {
                        console.log(data);
                        // 初始化表格
                        dataCount = data.result.count;
                        pageCount = Math.ceil(dataCount / 10); // 10/page
                        initTable(data.result.list, data.result.comments);
                    }, 0, 10);
                } else {
                    alert(data.msg);
                }

            });
        })


        // 下一页
        $('#DataTables_Table_0_next').click(function () {
            // 检查是否能下一页
            if (curPage + 1 < pageCount) {

                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage++;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, (curPage + 1) * 10, 10);
            } else {
                alert('已经到达最后页');
            }
        })

        // 上一页
        $('#DataTables_Table_0_previous').click(function () {
            // 检查是否能下一页
            if (curPage - 1 > -1) {

                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage--;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, (curPage - 1) * 10, 10);
            } else {
                alert('已经到达最后页');
            }
        })

        // 核销领取
        $('.table').delegate(".getReward", "click", function () {
            var openid = $($(this).siblings()[0]).text();
            var domItem = $($(this).siblings()[5]);
            changeState(function (data) {
                alert("领取成功!");
                domItem.text('已经领取');
            }, openid)
        })

        $('#downTable').click(function () {
            downTable('checkin_ntwk_1116');
        })
    </script>

</body>

</html>